<template>
  <div class="rated">
    <p class="title">最受好评电影</p>
    <div class="top-rated-list">
      <div class="box">
        <div class="item" v-for="item in ratedList" :key="item._id">
          <div class="img-wrap">
            <img :src="item.imgUrl" alt="" />
            <div class="shadow" v-if="item.score">
              观众评分: {{ item.score }}
            </div>
            <div class="shadow" v-else>{{ item.wishNum }}人想看</div>
          </div>

          <p class="item-title">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import request from "@/utils/request.js";
// import { ratedApi } from "@/api/home.js";

// 父容器要有明确的宽高
// 子元素只能是一个，要比父容器大
// 使用的transform的平移属性
// 哪个组件要用，就在那个组件去引入
import BScroll from "better-scroll";

import { mapState, mapActions } from "vuex";

export default {
  computed: mapState("hot", ["ratedList"]),
  // computed: mapState({
  //   ratedList: (state) => state.hot.ratedList,
  // }),
  methods: {
    ...mapActions("hot", ["asyncGetRated"]),
  },
  mounted() {
    this.asyncGetRated().then(() => {
      new BScroll(".top-rated-list", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });
  },

  // data() {
  //   return {
  //     list: [],
  //   };
  // },

  // mounted() {
  //   this.getData();
  // },

  // methods: {
  //   async getData() {
  //     const res = await ratedApi({ a: 3, b: 4 });
  //     this.list = res.result;

  //     await this.$nextTick();

  //     new BScroll(".top-rated-list", {
  //       scrollX: true,
  //       scrollY: false,
  //       click: true,
  //     });
  //   },
  // },
};
</script>

<style lang="less" scoped>
// @import url("../../../../../assets/css/var.less");
.rated {
  width: 100%;
  height: 205px;
  background-color: #fff;
  padding: 12px 15px;

  .title {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px;
  }

  .top-rated-list {
    width: 100%;
    height: 148px;
    // 加了bs，需要溢出隐藏
    overflow: hidden;

    .box {
      // display: flex;
      // overflow: auto;

      // 需要宽度由内容撑开，转成行内块元素
      display: inline-flex;

      .item {
        width: 85px;
        height: 100%;
        margin-right: 10px;
        flex-shrink: 0;

        .img-wrap {
          width: 85px;
          height: 115px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }

          .shadow {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 24px;
            background-image: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0.2),
              rgba(0, 0, 0, 0.8)
            );
            color: #faaf00;
            font-size: 11px;
            font-weight: 600;
            line-height: 24px;
          }
        }

        .item-title {
          font-size: 13px;
          color: #222;
          margin: 0 0 3px;
          width: 100%;
          .ell();
          margin-top: 6px;
          font-weight: 900;
        }

        &:last-child {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>
